<template>
  <div>
    <!-- 内容部分 -->
    <div class="container">
      <div
        ref="box"
        class="left"
        style="
          width: 40px;
          height: 100%;
          overflow-y: auto;
          border-right: 1px solid rgba(98, 99, 101, 0.5);
        "
      >
        <el-tooltip
          effect="dark"
          content="管理中心"
          class="item"
          placement="right"
          ><!-- changgeBgc(0)传递的值是当前为box的第几个子盒子用于dom操作 -->
          <div class="back manner" @click="changgeBgc(0)">
            <i class="el-icon-menu" style="transform: scale(1.4); color: black">
            </i>
          </div>
        </el-tooltip>
        <hr style="color: rgb(222, 225, 230); margin-top: 8px" />
        <el-tooltip
          effect="dark"
          content="返回主页"
          class="item"
          placement="right"
        >
          <div class="back backs" @click="changgeBgc(2)">
            <router-link to="/">
              <i
                class="el-icon-back"
                style="transform: scale(1.4); color: black"
              >
              </i>
            </router-link>
          </div>
        </el-tooltip>

        <el-tooltip
          effect="dark"
          content="添加容器"
          class="item"
          placement="right"
        >
          <div class="back" @click="changgeBgc(3)">
            <i
              @click="add"
              class="el-icon-plus"
              style="transform: scale(1.4); color: black"
            >
            </i>
          </div>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="下载模板"
          class="item"
          placement="right"
          @click.native="downs"
        >
          <div class="back" @click="changgeBgc(4)">
            <i
              class="el-icon-download"
              style="transform: scale(1.4); color: black"
            >
            </i>
          </div>
        </el-tooltip>
        <!-- <router-link to="/">
          
        <el-button
          class="btnMove"
          @click="add"
          style="
            width: 40px;
            height: 40px;
            border-radius: 60%;
            background-color: rgb(104, 186, 249);
            position: fixed;
            z-index: 99;
            top: 198px;
            left: 0px;
            margin-left: 5px;
          "
          ><i
            class="el-icon-plus"
            style="
              transform: scale(1.5);
              position: absolute;
              left:13px;
              top:12px
              margin-right:35px;"
          ></i
        ></el-button>

        <el-button
          class="btnMove"
          style="
            width: 40px;
            height: 40px;
            border-radius: 60%;
            background-color: rgb(104, 186, 249);
            position: fixed;
            z-index: 99;
            top: 138px;
            left: 0px;
            margin-left: 5px;
          "
          ><i
            class="el-icon-download"
            style="
              transform: scale(1.5);
              position: absolute;
              left:13px;
              top:12px
              margin-right:35px;"
          ></i
        ></el-button> -->
      </div>
      <!-- 画布部分 -->
      <div class="center" ref="Refcenter">
        <grid-layout
          @click.stop
          :layout.sync="dataList.layout"
          :col-num="12"
          :row-height="30"
          :is-mirrored="false"
          :vertical-compact="false"
          :margin="[10, 10]"
          :use-css-transforms="true"
          :preventCollision="true"
          :is-resizable="true"
          :responsive="false"
          :prevent-collision="true"
          :is-draggable="true"
        >
          <div
            @click="add"
            v-if="this.dataList.layout.length == 0"
            class="addplus"
          >
            <i
              style="font-size: 120px; color: rgb(176, 173, 173); width: 150px"
              class="el-icon-plus"
            ></i>
            <p style="font-size: 15px">请点击添加模块开始您的数据可视化</p>
          </div>

          <grid-item
            v-for="item in dataList.layout"
            ref="Refitem"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.i"
            :maxW="12"
            class="item"
            :autoSize="true"
            :responsive="true"
            :static="dataList.numdrag"
            @resize="SizeAutoChange(item)"
            style="display: flex"
          >
            <div class="box" ref="divbox" @click="addback(item.i)">
              <el-empty
                v-if="
                  !(item.state || item.titleState || item.plist.length !== 0)
                "
                :image-size="100"
                style="margin: auto"
                description="未显示组件"
              ></el-empty>

              <!-- 插入标题 -->
              <vue-draggable-resizable
                :x="item.titlePositon.x"
                :y="item.titlePositon.y"
                :width="item.titlePositon.width"
                :height="item.titlePositon.height"
                @click.stop.prevent
                v-if="item.titleState"
                @dragging="onDragTitle"
                @dragstop="onDragstop"
                :min-width="50"
                :draggable="item.titleUse"
                :resizable="false"
                style="height: 50px; line-height: 50px; border: none; left: 40%"
              >
                <h3 style="white-space: nowrap">{{ item.titlecontent }}</h3>
              </vue-draggable-resizable>

              <echart
                @getDragState="getdragState"
                @getechartdrag="getechartdrag"
                :options="item.options"
                v-if="item.state"
                :key="item.Ckey"
                :ref="`LineChart${item.i}`"
                :changestatus="item.titleUse"
              ></echart>

              <!-- 插入文本 -->
              <vue-draggable-resizable
                v-for="ipt in item.plist"
                :key="ipt.i"
                :x="ipt.x"
                :y="ipt.y"
                :w="ipt.width"
                :h="ipt.height"
                :draggable="item.containUse"
                :resizable="item.containScal"
                @dragging="onDrag"
                @dragstop="onDragstop"
                @resizing="onResize"
                @resizestop="onResizstop"
                style="border: none"
              >
                <textarea
                  @contextmenu.prevent="showMenu(ipt.i)"
                  @click="clickMenu(ipt.i)"
                  @mousedown="sendID(ipt.i)"
                  :style="`lineHeight: ${ipt.lineHeight}px;textAlign:${ipt.textAlign}; font-size: ${ipt.fontSize}px; color:${ipt.color};backgroundColor:${ipt.backgroundColor};resize:none ;width:100%;height:100%; outline: none;border:${ipt.border};`"
                  class="textcon"
                  name=""
                  id=""
                  cols="30"
                  rows="10"
                  v-model="ipt.textarea"
                  placeholder="点击修改文本"
                >
                </textarea>
              </vue-draggable-resizable>

              <div class="delet-add">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="克隆"
                  placement="bottom"
                >
                  <i
                    id="hover"
                    class="el-icon-document-copy"
                    :style="`position: absolute; right: 22px; margin-right: 50px;background-color: rgba(0,152,50,0);`"
                    @mousedown="clone(item.i)"
                  >
                  </i>
                </el-tooltip>

                <el-tooltip
                  id="hover"
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="bottom"
                >
                  <i
                    @click="reSet(item.i)"
                    class="el-icon-edit-outline"
                    :style="`float: right; margin:0 37px;background-color: rgba(0,152,50,0);;`"
                  ></i>
                </el-tooltip>

                <el-tooltip
                  id="hover"
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <i
                    id="hover"
                    @click="del(item.i)"
                    class="el-icon-error"
                    :style="`background-color: rgba(0,152,50,0);`"
                  ></i>
                </el-tooltip>
              </div>
            </div>
          </grid-item>
          <vue-context-menu
            :contextMenuData="dataList.contextMenuData"
            @deltext="deltext"
          ></vue-context-menu>
        </grid-layout>
      </div>
      <!-- 配置区域 -->
      <div class="right">
        <el-tabs
          v-model="dataList.options.activeName"
          @tab-click="handleClick"
          type="border-card"
          stretch
        >
          <el-tab-pane label="画布配置" name="first">
            <!-- radio单选 -->
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span class="iconfont icon-huabushezhi"></span>
                  &nbsp;&nbsp;&nbsp;
                  <span style="font-size: 16px">画布属性</span>
                </template>
                <el-radio-group
                  :key="Math.floor(Math.random() * 10 + 1)"
                  v-model="dataList.options.radio"
                  style="margin-left: 1.25rem"
                >
                  <!-- 取色器 -->
                  <el-radio
                    @click.native="changeRadio('color')"
                    :label="'color'"
                    style="transform: scale(1.3); margin-left: 13px"
                    ><span style="font-size: 5px">画布背景色</span></el-radio
                  >
                  <el-color-picker
                    v-model="dataList.options.moveBackColor"
                    style="margin: 0px 4px 25px 11px; top: 9px"
                  ></el-color-picker>
                  <!-- 上传背景图片 -->
                  <el-radio
                    @click.native="changeRadio('img')"
                    :label="'img'"
                    style="transform: scale(1.3); margin-left: 13px"
                    ><span style="font-size: 5px">画布背景图</span></el-radio
                  >

                  <!-- 图片
             -->
                  <el-upload
                    class="upload-demo"
                    action="http://10.10.25.84:8888/api/upload_image"
                    :on-change="handleChange"
                    :file-list="dataList.fileList"
                    :on-success="moveGeturl"
                    style="margin-top: -45px; margin-left: 108px"
                  >
                    <el-button
                      style="margin-left: 1.25rem; margin-top: 1.25rem"
                      size="small"
                      >点击上传</el-button
                    >
                  </el-upload>
                </el-radio-group>
              </el-collapse-item>
            </el-collapse>

            <!--选取边框颜色  -->
            <!-- <hr style="color: blue; margin-top: 0.25rem; height: 0.125rem" /> -->
            <!-- 增加子容器 -->
          </el-tab-pane>
          <!-- ------ -------------------------------------------------------------------->
          <el-tab-pane label="容器配置" name="second">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <span class="iconfont icon-rongqi"></span>&nbsp;&nbsp;&nbsp;
                  <span style="font-size: 16px">容器元素</span>
                </template>

                <el-select
                  v-model="dataList.selectionsval"
                  filterable
                  placeholder="请选择"
                  @change="logval"
                  style="
                    width: 200px !important;
                    margin-left: 20px;
                    margin-top: 10px;
                  "
                >
                  <el-option
                    v-for="item in dataList.options.Selections"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-collapse-item>
            </el-collapse>

            <!-- Echatrs -->
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <span class="iconfont icon-tubiao-zhexiantu"></span
                  >&nbsp;&nbsp;&nbsp;<span style="font-size: 16px"
                    >图表组件</span
                  >
                </template>

                <ol
                  style="
                    height: 150px;
                    width: 100%;
                    overflow: scroll;
                    overflow-x: hidden;
                    overflow-y: auto;
                    left: 40px;
                  "
                >
                  <li
                    @click="addEchart(item.Ctitle)"
                    class="choseEchart"
                    v-for="item in Eoptions"
                    :key="item.Ctitle"
                  >
                    {{ item.Ctitle }}
                  </li>
                </ol>
              </el-collapse-item>
            </el-collapse>
            <!--添加标题  -->
            <div class="title">
              <el-collapse>
                <el-collapse-item name="1">
                  <template slot="title">
                    <span class="iconfont icon-title">&nbsp;&nbsp;&nbsp;</span
                    >添加标题
                  </template>
                  <el-checkbox
                    v-model="dataList.titleChecked"
                    @change="titleChange"
                    style="margin-left: 20px; margin-top: 10px"
                    >显示标题</el-checkbox
                  >
                  <el-input
                    v-model="dataList.options.titleval"
                    :disabled="!dataList.titleChecked"
                    placeholder="请输入/修改标题"
                    style="
                      width: 200px;
                      margin-left: 20px !important;
                      margin-top: 10px;
                    "
                  ></el-input>
                  <!-- 解决-------------------------------------------------------------- -->
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template slot="title">
                    <span class="iconfont icon-wenbenbianji"
                      >&nbsp;&nbsp;&nbsp;</span
                    >添加文本
                  </template>
                  <!-- <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="options.xxxxx待定"> </el-input> -->
                  <div
                    style="
                      display: flex;
                      width: 100%;
                      height: 40px;
                      margin-top: 5px;

                      padding-right: 5px;
                    "
                  >
                    <div
                      style="
                        font-size: 25px;
                        margin: 0px 0px -3px 20px;
                        text-align: center;
                        line-height: 40px;
                        opacity: 0.7;
                        background-color: rgb(245 247 250);
                        border-radius: 5px;
                        width: 31px;
                        height: 31px;
                      "
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="增加文本框"
                        placement="left-end"
                        style="background-color: rgb(245 247 250)"
                      >
                        <i class="el-icon-circle-plus" @click="addContent"></i>
                      </el-tooltip>
                    </div>

                    <div
                      class="el-icon"
                      style="
                        justify-content: space-around;
                        display: flex;
                        width: 159px !important;
                        height: 2rem;
                        margin-left: -8px;
                        padding: 5px;
                        font-size: 22px;
                        opacity: 0.7;
                        background-color: rgb(245 247 250);
                        border-radius: 5px;
                        margin-left: 15px;
                      "
                    >
                      <el-tooltip
                        class="iconitem"
                        effect="dark"
                        content="左排列"
                        placement="top"
                        style="background-color: rgb(245 247 250)"
                      >
                        <i class="el-icon-s-fold" @click="operation()"></i>
                      </el-tooltip>

                      <el-tooltip
                        class="iconitem"
                        effect="dark"
                        content="居中"
                        placement="top"
                        style="background-color: rgb(245 247 250)"
                      >
                        <i class="el-icon-s-operation" @click="fold()"></i>
                      </el-tooltip>
                      <el-tooltip
                        class="iconitem"
                        effect="dark"
                        content="右排列"
                        placement="top"
                        style="background-color: rgb(245 247 250)"
                      >
                        <i class="el-icon-s-unfold" @click="unfold()"></i>
                      </el-tooltip>
                    </div>
                  </div>

                  <div
                    style="
                      display: flex;
                      width: 100%;
                      height: 40px;

                      padding-right: 5px;
                    "
                  >
                    <div
                      style="
                        font-size: 25px;
                        margin: 0px 0px -3px 20px;
                        text-align: center;
                        line-height: 33px;
                        opacity: 0.7;
                        background-color: rgb(245 247 250);
                        border-radius: 5px;
                        width: 31px;
                        height: 31px;
                      "
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除文本框"
                        placement="left-end"
                        style="background-color: rgb(245 247 250)"
                      >
                        <span
                          class="iconfont icon-shanchu"
                          @click="disapper()"
                          style="width: 31px; height: 31px; font-size: 22px"
                        ></span>
                      </el-tooltip>
                    </div>

                    <el-select
                      v-model="dataList.value"
                      style="width: 158px; margin-left: 15px"
                      placeholder="请选择字体大小"
                      size="small"
                      class="inputFont"
                      @change="fontchangess"
                    >
                      <el-option
                        v-for="item in dataList.fontoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                        <div class="slayebox">
                          <span style="float: right">{{ item.label }}</span>
                          <span
                            class="lookhover"
                            @mouseenter="moves(item.value)"
                            @mouseleave="leaves"
                            style="float: left; color: #8492a6; font-size: 13px"
                            >预览样式</span
                          >
                        </div>
                      </el-option>
                    </el-select>
                  </div>
                  <div
                    style="
                      margin-left: 10px;
                      font-size: 12px;
                      color: rgb(104, 98, 98);
                      width: 100%;
                      display: flex;
                    "
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="文本边框颜色"
                      placement="left-end"
                    >
                      <el-color-picker
                        style="margin-left: 20px; width: 35px; height: 35px"
                        v-model="dataList.options.color1"
                        @change="textAreaColor"
                      ></el-color-picker>
                    </el-tooltip>

                    <div
                      class="spaceicon"
                      style="
                        margin-left: 0px;
                        line-height: 16px;
                        font-size: 20px;
                        display: flex;
                        width: 159px;
                        background: rgb(245 247 250);
                        border-radius: 5px;
                      "
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="文本行高"
                        placement="bottom"
                      >
                        <span
                          class="iconfont icon-a-yuanshuju-hanggaodanhang"
                          style="
                            display: block;
                            margin-top: 7px;
                            margin-left: 4px;
                          "
                        ></span>
                      </el-tooltip>
                      <el-input-number
                        style="margin-left: 15px"
                        v-model="dataList.options.fontSnum"
                        :min="0"
                        :max="90"
                        size="mini"
                        label="描述文字"
                        :step="10"
                        @change="textArealineHeight"
                      ></el-input-number>
                    </div>
                  </div>

                  <div
                    style="
                      margin-top: 10px;
                      margin-left: 69px;
                      margin-bottom: 0.625rem;
                      font-size: 12px;
                      color: rgb(104, 98, 98);
                      width: 159px;
                      display: flex;
                      height: 34px;
                      background-color: #f5f7fa;
                      border-radius: 5px;
                    "
                  >
                    <div style="margin-left: 6px; line-height: 33px">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="文本背景"
                        placement="bottom"
                      >
                        <span class="iconfont icon-beijingse"></span>
                      </el-tooltip>
                    </div>
                    <el-color-picker
                      style="margin-left: 25px"
                      v-model="dataList.options.color3"
                      @change="textAreaChange"
                    ></el-color-picker>

                    <div
                      style="
                        font-size: 12px;
                        color: rgb(104, 98, 98);
                        display: flex;
                        margin-left: 5px;
                      "
                    >
                      <div style="margin-left: 5px; line-height: 33px">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="一键设置背景"
                          placement="bottom"
                        >
                          <span class="iconfont icon-quanxuan"></span>
                        </el-tooltip>
                      </div>
                      <el-color-picker
                        style="margin-left: 20px"
                        v-model="dataList.options.allColor"
                        @change="setAllcolor"
                      ></el-color-picker>
                    </div>
                  </div>

                  <div
                    style="
                      display: flex;
                      margin-left: 69px;
                      font-size: 12px;
                      color: rgb(104, 98, 98);
                      height: 34px;
                      width: 159px;
                      background-color: #f5f7fa;
                      border-radius: 5px;
                    "
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="文本边框"
                      placement="bottom"
                    >
                      <span
                        class="iconfont icon-biankuang"
                        style="
                          display: block;
                          margin-top: 0px;
                          margin-left: 5px;
                        "
                      ></span>
                    </el-tooltip>
                    <el-checkbox
                      v-model="dataList.options.checked"
                      @change="changeBode"
                      style="margin-left: 21px; margin-top: 5px"
                      >选择边框</el-checkbox
                    >
                  </div>
                </el-collapse-item>
                <el-collapse-item name="3">
                  <template slot="title">
                    <span class="iconfont icon-background"></span
                    >&nbsp;&nbsp;&nbsp;容器属性
                  </template>
                  <el-radio-group
                    :key="Math.floor(Math.random() * 10 + 1)"
                    v-model="dataList.options.radio2"
                    style="margin-left: 1.25rem; margin-top: 1.25rem"
                  >
                    <div style="width: 100%; height: 35px">
                      <!-- 取色器改变容器的颜色 -->
                      <el-radio
                        @click.native="changeRadio2('color')"
                        :label="'color'"
                        style="
                          font-size: 12px;
                          transform: scale(1.3);
                          float: left;
                          margin: 0px 0px 5px 10px;
                          line-height: 33px;
                        "
                        >背景颜色
                      </el-radio>
                      <el-color-picker
                        v-model="dataList.options.boxBackColor"
                        style="float: right; margin-left: 35px; left: -50px"
                      ></el-color-picker>
                    </div>
                    <!-- 上传背景图片 -->
                    <div style="width: 100%; height: 35px">
                      <el-radio
                        @click.native="changeRadio2('img')"
                        :label="'img'"
                        style="
                          float: left;
                          font-size: 12px;
                          transform: scale(1.3);
                          margin: 0px 0px 5px 11px;
                          line-height: 33px;
                        "
                        >选择背景图</el-radio
                      >
                      <div style="float: right; margin-left: 35px; z-index: 99">
                        <el-upload
                          class="upload-demo"
                          action="http://10.10.25.84:8080/api/upload_image"
                          :on-change="handleChange"
                          :file-list="dataList.fileList"
                          :on-success="boxGeturl"
                        >
                          <el-button size="small">点击上传</el-button>
                        </el-upload>
                      </div>
                    </div>
                  </el-radio-group>

                  <!-- <div
                    style="
                      margin-left: 49px;
                      margin-bottom: 0.625rem;
                      font-size: 16px;
                      color: rgb(104, 98, 98);
                    "
                  >
                    选取边框颜色
                  </div>
                  <el-color-picker
                    style="margin-left: 15px"
                    show-alpha
                    v-model="dataList.options.borderColor"
                  ></el-color-picker> -->
                </el-collapse-item>
              </el-collapse>
            </div>
            <!-- 选取echart图表插入功能 -->
            <!-- <hr style="color: blue; margin-top: 20px; height: 0.125rem" /> -->
            <!-- --------------------------------------------------------------------------------------- -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
/* 导入拖拽组件 */
import VueGridLayout from "vue-grid-layout";
/* 导入echatrs图标 */
import echart from "./echart.vue";
import { Eoptions } from "@/data/options.js";
/* 引入初始化数据 */
import { fs } from "../rander.js";

export default {
  // data
  data() {
    return {
      Eoptions: Eoptions,
      /* 初始化数据存在 */
      dataList: fs,
    };
  },
  // compoments
  components: {
    /* 拖拽组件组测 */
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    /* echarts注册 */
    echart,
  },
  // tab栏切换
  methods: {
    changeRadio(val) {
      if (val == this.dataList.options.radio) {
        this.dataList.options.radio = "";
      }
    },
    changeRadio2(val) {
      if (val == this.dataList.options.radio2) {
        this.dataList.options.radio2 = "";
      }
    },
    savedata() {
      window.addEventListener("beforeunload", () => {
        var data = JSON.stringify(this.dataList);
        let local = localStorage.length;
        localStorage.setItem(`${local}`, data);
        // console.log(localStorage.getItem("datalist"));
      });
    },
    downs() {
      var data = JSON.stringify(this.dataList);
      let local = localStorage.length;
      localStorage.setItem(`${local}`, data);
      // console.log(localStorage.getItem("datalist"));
      this.dataList = JSON.parse(localStorage.getItem(`${local}`));
      console.log(localStorage.length);
      // console.log(this.dataList);
      // console.log("ss");
    },
    // clone
    clone(id) {
      // 我点击克隆传一个id，这个id与layout匹配，匹配之后就增加一条一模一样的数据，但是里面的plist的id不能够相同
      this.dataList.layout.some((item, i) => {
        if (item.i == id) {
          this.dataList.layout.push(
            JSON.parse(
              JSON.stringify({
                x: 1,
                y: 1,
                w: 5,
                h: 8,
                i: `${Number(this.dataList.layout.slice(-1)[0].i) + 1}`,
                state: item.state,
                options: item.options,
                titleState: item.titleState,
                titlecontent: item.titlecontent,
                plist: item.plist,
                titlePositon: {
                  x: item.titlePositon.x,
                  y: item.titlePositon.y,
                  width: item.titlePositon.width,
                  height: item.titlePositon.height,
                },
                titleUse: item.titleUse,
                containUse: item.containUse,
                containScal: item.containScal,
                // 这里出现了深拷贝的问题。
              })
            )
          );
        }
      });
      this.dataList.options.Selections.push({
        value: this.dataList.options.Selections.slice(-1)[0].value + 1,
        label: `容器${this.dataList.options.Selections.slice(-1)[0].value + 1}`,
      });
    },
    changeboxup(item) {
      this.dataList.layout.forEach((items, i) => {
        if (items.i == this.dataList.selectionsval) {
          this.$refs.Refitem[i].$el.style.border = "5px solid black";
        }
      });

      this.dataList.selectionsval = "容器" + item;
      this.dataList.selectionsval =
        this.dataList.options.Selections[item - 1].value;
    },
    changeboxdown(item) {
      this.dataList.layout.forEach((items, i) => {
        this.$refs.Refitem[i].$el.style.border = "";
      });
    },

    onResize(x, y, width, height) {
      this.dataList.numdrag = true;
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((ipt) => {
            if (ipt.i == this.pid) {
              ipt.x = x;
              ipt.y = y;
              ipt.width = width;
              ipt.height = height;
            }
          });
        }
      });
    },
    onResizstop() {
      this.dataList.numdrag = false;
    },
    sendID(id) {
      this.pid = id;
    },
    // 鼠标右键
    showMenu(id) {
      this.dataList.pid = id;
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.dataList.contextMenuData.axis = {
        x,
        y,
      };
    },
    deltext() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((text, index) => {
            if (text.i == this.pid) {
              item.plist.splice(index, 1);
            }
          });
        }
      });
    },

    // 鼠标右键结束

    textcontent() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          let index = 0;
          index = i;
          this.dataList.options.textcontent.backgroundColor =
            this.$refs.Refitem[index].$el.style.backgroundColor;
        }
      });
    },

    // title
    onDragTitle(x, y) {
      this.dataList.numdrag = true;
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.titlePositon.x = x;
          item.titlePositon.y = y;
        }
      });
    },
    onDrag(x, y) {
      this.dataList.numdrag = true;
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((ipt) => {
            if (ipt.i == this.pid) {
              ipt.x = x;
              ipt.y = y;
            }
          });
        }
      });
    },
    onDragstop() {
      this.dataList.numdrag = false;
    },
    changeTitle() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.titleState = true;
          item.titlecontent = this.dataList.options.titleval;
        }
      });
    },
    // 添加文本内容
    addContent() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          if (item.plist.length > 0) {
            item.plist.push({
              i: item.plist.slice(-1)[0].i + 1,
              textarea: "",
              color: "",
              fontSize: "",
              lineHeight: "",
              textAlign: "",
              backgroundColor: "",
              border: "1px solid ",
              borderStatus: true,

              x: 350,

              y:
                item.plist.slice(-1)[0].y + item.plist.slice(-1)[0].height + 10,
              width: 300,
              height: 100,
            });
          } else {
            item.plist.push({
              i: 1,
              textarea: "",
              color: "",
              fontSize: "",
              lineHeight: "",
              textAlign: "",
              backgroundColor: "",
              border: "1px solid ",
              borderStatus: true,
              //文本内容在这里设置
              x: 350,
              y: 0,
              width: 300,
              height: 100,
            });
          }
        }
      });
    },
    handleChange(val) {
      console.log(val);
    },
    getlist(val) {
      this.dataList.EchartList = val;
    },
    getechartdrag(val) {
      this.dataList.numdrag = val;
    },
    getdragState(val) {
      this.dataList.numdrag = val;
    },
    SizeAutoChange(item) {
      if (item.state) {
        var EchartId = `LineChart${item.i}`; // 拿到子组件实力对象
        eval(`this.$refs.${EchartId}[0].sizechange()`);
      }
    },
    // echart
    addEchart(Ctitle) {
      this.dataList.layout.some((item) => {
        if (item.i == this.dataList.selectionsval) {
          Eoptions.some((option) => {
            if (option.Ctitle == Ctitle) {
              item.state = true;
              item.options = JSON.parse(JSON.stringify(option));
              console.log(item.options);
            }
          });
        }
      });
    },

    handleChange(file, fileList) {
      this.dataList.fileList = fileList.slice(-3);
    },
    // file
    moveGeturl(res) {
      this.dataList.options.moveImgUrl = res.result.url;
      console.log(this.dataList.options.moveImgUrl);
    },
    // 得到盒子的背景图片url
    boxGeturl(res) {
      this.dataList.options.boxImgUrl = res.result.url;
      console.log(this.dataList.options.boxImgUrl);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 打印选择的是那个容器的方法
    logval(val) {
      console.log(val);

      this.addback(val);
    },
    // 增加盒子方法
    add() {
      if (this.dataList.layout.length > 0) {
        this.dataList.layout.push({
          x: 1,
          y: 1,
          w: 5,
          h: 8,
          i: `${Number(this.dataList.layout.slice(-1)[0].i) + 1}`,
          state: false,
          options: {},
          titleState: false,
          titlecontent: "请输入标题",
          plist: [],

          titlePositon: {
            x: 0,
            y: 0,
            width: 100,
            height: 50,
          },
          titleUse: false,
          containUse: false,
          containScal: false,
        });
        this.dataList.options.Selections.push({
          value: this.dataList.options.Selections.slice(-1)[0].value + 1,
          label: `容器${
            this.dataList.options.Selections.slice(-1)[0].value + 1
          }`,
        });
      } else {
        this.dataList.layout.push({
          x: 0,
          y: 0,
          w: 5,
          h: 8,
          i: 1,
          state: false,
          options: {},
          titleState: false,
          titlecontent: "请输入标题",
          titlePositon: {
            x: 0,
            y: 0,
            width: 100,
            height: 50,
          },
          plist: [],
          titleUse: false,
          containUse: false,
          containScal: false,
        });
        this.dataList.options.Selections.push({
          value: 1,
          label: `容器1`,
        });
        this.dataList.selectionsval = 1;
        this.$nextTick(() => {
          this.addback(1);
        });
      }
    },

    del(id) {
      // 现在是layout里面的数据被删除了，怎么让selection里面的数据也变少呢？点击删除按钮就删除对应与selectionval匹配的那个数组对象
      // 在layout里面数据被删除的时候，怎么让选项删除，我们可以得到i 然后
      this.dataList.options.Selections.some((item, i) => {
        if (item.value == id) {
          let index = 0;
          index = i;
          this.dataList.options.Selections.splice(index, 1);
          if (this.dataList.options.Selections.length == 0) {
            this.dataList.selectionsval = "";
          }
        }
      });

      if (this.dataList.selectionsval == id) {
        // 例如现在的seletionval是2 我就要与第二个item相对应起来 为什么删除后面的不行呢？类型不匹配的问题 ，我用的是全等符号。
        this.dataList.layout.some((item, i) => {
          if (item.i == id) {
            let index = 0;
            index = i;
            this.dataList.layout.splice(index, 1);
          }
        });

        this.dataList.selectionsval = "";
        // this.dataList.selectionsval = this.dataList.layout[0].i;

        // /*  this.dataList.selectionsval = this.dataList.options.Selections[0].value; */
        // this.$nextTick(() =>
        //   this.dataList.layout.forEach((items, i) => {
        //     if (items.i == this.dataList.selectionsval) {
        //       this.$refs.Refitem[i].$el.firstChild.style.border =
        //         "1px dashed #007ACC";
        //       this.$refs.Refitem[i].$el.firstChild.style.boxShadow =
        //         "0px 0px 5px rgb(64,158,255) inset";
        //     }
        //   });
        // });
      } else {
        this.dataList.layout.some((item, i) => {
          if (item.i == id) {
            let index = 0;
            index = i;
            this.dataList.layout.splice(index, 1);
          }
        });
      }
    },
    /* 禁止页面放大 */
    keepRatio() {
      var ratio = 0; // 定义一个缩放比例
      var screen = window.screen; // 获取窗口对象
      var ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio; // 像素大小的比例
      } else if (~ua.indexOf("msie")) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (
        window.outerWidth !== undefined &&
        window.innerWidth !== undefined
      ) {
        ratio = window.outerWidth / window.innerWidth; // 外部比例/内部比例：缩放比例
      }
      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      this.ratio = (ratio / 100).toFixed(2);
      document.body.style.zoom = 1 / this.ratio; // 窗口视图除以缩放比例：即缩放还原
    },
    /* 点击菜单事件 */
    clickMenu(pid) {
      this.dataList.options.pids = pid;
      /* 判断当前选中容器有无边框 */
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              if (items.borderStatus == true) {
                this.dataList.options.checked = true;
              } else {
                this.dataList.options.checked = false;
              }
            }
          });
        }
      });
    },
    /* 文本颜色改变 */
    textAreaColor(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.color = val;
            }
          });
        }
      });
    },
    /* 文本字体大小改变 */
    textAreaFontsize(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.fontSize = val;
            }
          });
        }
      });
    },
    /* 文本背景改变 */
    textAreaChange(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.backgroundColor = val;
            }
          });
        }
      });
    },
    /* 指定去除边框的样式 */
    changeBode(val) {
      console.log(val);
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              if (val == false) {
                items.border = "none";
                items.borderStatus = false;
              } else {
                items.border = "1px solid";
                items.borderStatus = true;
              }
            }
          });
        }
      });
    },
    /* 设置一键变色 */
    setAllcolor(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.forEach((items) => {
            items.backgroundColor = val;
          });
        }
      });
    },
    /* 监听标题是否被选中 */
    titleChange(val) {
      /* if (val == false) {
        this.dataList.options.titleval = "";
      } */
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          if (val == false) {
            item.titlecontent = this.dataList.options.titleval;
            this.dataList.options.titleval = "";
            item.titleState = false;
          } else {
            item.titleState = true;
            this.dataList.options.titleval = item.titlecontent;
          }
        }
      });
    },
    /* 编辑功能 */
    reSet(id) {
      // this.dataList.selectionsval = `容器${id}`;
      // this.dataList.selectionsval =
      //   this.dataList.options.Selections[id - 1].value;
      this.dataList.layout.some((item, i) => {
        item.titleUse = false;
        item.containUse = false;
        item.containScal = false;
        if (item.i == this.dataList.selectionsval) {
          item.titleUse = true;
          item.containUse = true;
          item.containScal = true;
        }
      });
    },
    /* 点击容器选中容器 */

    addback(item) {
      for (var y = 0; y < this.dataList.options.Selections.length; y++) {
        if (this.dataList.options.Selections[y].value == item) {
          this.dataList.selectionsval =
            this.dataList.options.Selections[y].value;
        }
      }
      this.dataList.layout.forEach((items, i) => {
        this.$refs.Refitem[i].$el.firstChild.style.border = "";
        this.$refs.Refitem[i].$el.firstChild.style.boxShadow = "";
      });
      this.dataList.layout.forEach((items, i) => {
        if (items.i == this.dataList.selectionsval) {
          this.$refs.Refitem[i].$el.firstChild.style.border =
            "1px dashed #007ACC";
          this.$refs.Refitem[i].$el.firstChild.style.boxShadow =
            "0px 0px 5px rgb(64,158,255) inset";
        }
      });
    },
    /* 设置字体大小 */
    fontchangess(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.fontSize = val;
              this.dataList.oldFontsize = val;
            }
          });
        }
      });
    },
    //文字的排版
    fold() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.textAlign = "center";
            }
          });
        }
      });
    },
    operation() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.textAlign = "left";
            }
          });
        }
      });
    },
    unfold() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.textAlign = "right";
            }
          });
        }
      });
    },
    disapper() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items, d) => {
            if (items.i == this.dataList.options.pids) {
              item.plist.splice(d, 1);
            }
          });
        }
      });
    },
    /* 文本行高大小改变 */
    textArealineHeight(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.lineHeight = val;
            }
          });
        }
      });
    },
    /* 预览字体 */
    moves(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.fontSize = val;
            }
          });
        }
      });
    },
    /* 结束预览 */
    leaves() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          item.plist.some((items) => {
            if (items.i == this.dataList.options.pids) {
              items.fontSize = this.dataList.oldFontsize;
            }
          });
        }
      });
    },
    /* 管理中心颜色改变 */
    changgeBgc(id) {
      for (var i = 0; i < this.$refs.box.children.length; i++) {
        this.$refs.box.children[i].style.backgroundColor = "";
      }
      this.$refs.box.children[id].style.backgroundColor = "rgb(176,173,173)";
    },
  },
  watch: {
    resetinput(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          let index = 0;
          index = i;
          let p = this.$refs.Refitem[index].$el.firstElementChild.children[1];
          p.innerHTML = val;
          this.dataList.titleData.forEach((item) => {
            if (item.id == this.dataList.selectionsval) {
              item.color = val;
            }
          });
        }
      });
    },
    /* 监听实时更新标题数据 */
    "dataList.options.titleval"(val) {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          if (this.dataList.options.titleval != "") {
            item.titlecontent = val;
          }
        }
      });
    },
    /* 监听容器是否切换 */
    /* 监听容器是否切换 */
    "dataList.selectionsval"() {
      this.dataList.layout.some((item, i) => {
        if (item.i == this.dataList.selectionsval) {
          if (item.titleState == false) {
            this.dataList.titleChecked = false;
            this.dataList.options.titleval = "";
          } else {
            this.dataList.titleChecked = true;
            this.dataList.options.titleval = item.titlecontent;
          }
        }
      });
      this.dataList.layout.some((item, i) => {
        item.titleUse = false;
        item.containUse = false;
        item.containScal = false;
      });
    },
  },

  // updated钩子函数
  updated() {
    //选中容器改变边框颜色

    // 背景颜色和背景图片代码(包含容器和画布)
    // 1.画布背景颜色和背景图片
    if (this.dataList.options.radio === "color") {
      this.$refs.Refcenter.style.backgroundColor =
        this.dataList.options.moveBackColor;
      this.$refs.Refcenter.style.backgroundImage = "";
      this.$el.style.setProperty(
        "--child-background-color",
        this.dataList.options.moveBackColor
      );
    }
    if (this.dataList.options.radio === "img") {
      this.$refs.Refcenter.style.backgroundImage = `url(${this.dataList.options.moveImgUrl})`;
      this.$refs.Refcenter.style.backgroundColor = "";
      // 我得想一个办法，让这个伪类元素的背景颜色和背景图片相互匹配
    }
    if (this.dataList.options.radio == "") {
      this.$refs.Refcenter.style.backgroundColor = "";
      this.$refs.Refcenter.style.backgroundImage = "";
    }
    // 2.选择容器代码， 容器背景颜色和背景图片
    if (this.dataList.options.radio2 === "color") {
      Vue.nextTick(() => {
        // 有问题，问题就是有差别  我现在想的是 利用selectionsval来和layout里面的i匹配。
        // this.$refs.Refitem[Number(this.selectionsval - 1)].$el.style.backgroundColor = this.options.boxBackColor
        // this.$refs.Refitem[Number(this.selectionsval - 1)].$el.style.backgroundImage = ''.se
        this.dataList.layout.some((item, i) => {
          if (item.i == this.dataList.selectionsval) {
            let index = 0;
            index = i;
            this.$refs.Refitem[index].$el.style.backgroundColor =
              this.dataList.options.boxBackColor;
            this.$refs.Refitem[index].$el.style.backgroundImage = "";
          }
        });
      });
    }
    if (this.dataList.options.radio2 === "img") {
      Vue.nextTick(() => {
        this.dataList.layout.some((item, i) => {
          if (item.i == this.dataList.selectionsval) {
            let index = 0;
            index = i;
            this.$refs.Refitem[
              index
            ].$el.style.backgroundImage = `url(${this.dataList.options.boxImgUrl})`;
            this.$refs.Refitem[index].$el.style.backgroundColor = "";
          }
        });
      });
    }
    if (this.dataList.options.radio2 == "") {
      Vue.nextTick(() => {
        this.dataList.layout.some((item, i) => {
          if (item.i == this.dataList.selectionsval) {
            let index = 0;
            index = i;
            this.$refs.Refitem[index].$el.style.backgroundImage = "";
            this.$refs.Refitem[index].$el.style.backgroundColor = "";
          }
        });
      });
    }
    this.$el.style.setProperty(
      "--child-border-color",
      this.dataList.options.borderColor
    );
  },
  // mounted钩子函数
  mounted() {
    /* 初始化侧边栏样式 */
    this.$refs.box.children[2].style.backgroundColor = "rgb(176,173,173)";
    this.$el.style.setProperty(
      "--child-bosrder-color",
      this.dataList.options.borderColor
    );
    /* 禁止页面缩放 */
    // -----修改文本内容样式

    // -------------------
    this.keepRatio();
    window.addEventListener("resize", () => {
      this.keepRatio();
    });
  },
};
window.addEventListener(
  "mousewheel",
  function (event) {
    if (event.ctrlKey === true || event.metaKey) {
      event.preventDefault();
    }
  },
  { passive: false }
);

//禁止缩放页面
window.addEventListener(
  "DOMMouseScroll",
  function (event) {
    if (event.ctrlKey === true || event.metaKey) {
      event.preventDefault();
    }
  },
  { passive: false }
);
</script>
<style lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  touch-action: none;
}
:root {
  --child-border-color: coral;
  --child-background-color: rgb(221, 20, 20);
  --textcontent-color: black;
  --textcontent-background-color: gray;
}
/* 添加出来的正文文本域 */
.textcon:hover {
  cursor: pointer;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.center {
  flex: 1;
  height: 100%;
  background-color: rgb(222, 225, 230);
  overflow-y: auto;
}
.right {
  width: 15.625rem;
  height: 100%;
  overflow-y: auto;
  border-left: 2px solid rgb(158, 160, 163);
}
/* 拖动项 */
.item {
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.item:hover {
  /* border: 10px solid red !important; */
  background-color: white;

  .delet-add {
    visibility: visible;
    cursor: pointer;
    font-size: 20px;
  }
}

.el-tabs {
  height: 100%;
  overflow-y: auto;
}
#tab-first,
#tab-second {
  color: black;
  // font-size: 1.125rem;
  height: 3.125rem;
  line-height: 3.125rem;
  border-radius: 0.3125rem;
}
#tab-first:hover,
#tab-second:hover {
  color: black;
}
.delbox:hover {
  cursor: pointer;
}
.el-tabs__nav {
  background-color: rgb(224, 224, 224);
}

.delet-add {
  position: absolute;
  top: 2px;
  right: 2px;
  visibility: hidden;
  width: 20%;
  height: 20px;
  z-index: 9;
}
.echartImg {
  margin-left: 50px;
  width: 100%;
  height: 200px;
}
/* 美化滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color 0.3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.3);
}
/* 添加标题 */
.el-button--info {
  width: 208px;
  background-color: rgb(169, 165, 165) !important;
  color: #101f1c;
}
.fontSize {
  width: 200px !important;
  margin-left: 6px;
}
.vue-grid-item {
  position: relative;
}
/* 标题类名 */
.titleadd {
  position: absolute;
}
.el-icon-error {
  color: black !important;
  position: absolute;
  right: 3px;
  top: 0;
}
.el-icon-circle-plus-outline {
  color: black !important;
  font-size: 15px !important;
  position: absolute;
  right: 25px;
  top: 0;
}
/* 包裹子模块容器 */
.box {
  /*  display: flex; */
  width: 100%;
  height: 100%;
  position: relative;
  z-index: -999;
}
.box:hover {
  border: 2px solid rgb(104, 186, 249);
}
.positon-top {
  width: 200px !important;
}
// .myechart {
//   position: absolute;
//   bottom: 0;
//   margin: 10px;

// }
.el-radio__label {
  font-size: 12px !important;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0px !important;
  padding-top: 0.625rem !important;
  padding-top: 0.625rem !important;
}
.el-color-picker__trigger {
  width: 2rem !important;
  font-size: 12px !important;
  height: 2rem !important;
}
.el-collapse-item__header {
  margin-left: 1.1875rem !important;
  font-size: 16px !important;
  color: rgb(115, 111, 111) !important;
}
.el-textarea__inner {
  width: 90% !important;
  margin: 0 auto;
}
.el-button.is-round {
  margin-left: 10px;
  border-radius: 5px !important;
  height: 2.1875rem;
  width: 115px !important;
}
body {
  zoom: 1 !important;
  user-select: none;
}
hr {
  border: 0;
  border-bottom: 1px solid rgb(185, 182, 182);
}

.addplus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 100%);

  display: flex;
  width: 260px;
  height: 230px;
  flex-wrap: wrap;
  justify-content: center;
  border: 3px dashed rgb(176, 173, 173);
  p {
    color: rgb(176, 173, 173);
    margin-bottom: 20px;
  }
  i {
    margin-top: 35px;
    margin-left: 30px;
  }
}
.addplus:hover {
  cursor: pointer;
  background-color: rgba(174, 165, 165, 0.251);
  border: 3px dashed rgb(143, 146, 148);
  p {
    color: rgb(102, 104, 105);
  }
  i {
    color: rgb(122, 126, 128) !important;
  }
}

//更改内容g
.el-empty {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}

.choseEchart {
  height: 35px;
  line-height: 35px;
  width: 80%;
  border-radius: 5px;
  padding-left: 15px;
  margin: 0 auto;
  color: rgb(115, 111, 111);
  font-size: 14px;
}

.choseEchart:hover {
  cursor: pointer;
  color: #2f3031;
}
.vue-grid-item.vue-grid-placeholder {
  background-color: rgba(144, 147, 153, 0.5);
}

.vue-contextmenu-listWrapper .context-menu-list[data-v-1931f86e] {
  border-radius: 5px;
}
.nav-name-right[data-v-1931f86e] {
  line-height: 7px !important;
}
.vue-contextmenu-listWrapper[data-v-1931f86e] {
  border-radius: 5px !important;
  background-color: rgb(255, 255, 255);
}
.el-icon-s-fold:hover {
  color: rgba(0, 81, 255, 0.678);
}

.el-icon-s-operation:hover {
  color: rgba(0, 81, 255, 0.678);
}
.el-icon-s-unfold:hover {
  color: rgba(0, 81, 255, 0.678);
}
.btnMove:hover {
  box-shadow: 0px 0px 4px rgb(104, 186, 249);
  transform: translateY(-2px);
}

.el-collapse-item__content {
  display: flex;
  flex-wrap: wrap;
}
.el-color-picker {
  left: -10px;
}
.el-select > .el-input {
  width: 144px;
}
.title {
  font-size: 16px;
}

.el-select--small .el-input--suffix {
  width: 159px;
}
// .el-select--small .el-input--suffix input {
// background-color: red;
// }
.spaceicon .iconfont {
  font-size: 23px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #6f6f71 !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #6f6f71 !important;
  border-color: #6f6f71 !important;
}

.el-checkbox .el-checkbox__input .el-checkbox__inner {
  border-color: #917676 !important;
}
.iconitem {
  margin-bottom: 10px;
}
.iconitem:hover {
  width: 20px;
  height: 20px;
  border-radius: 10%;
  background-color: #7a7e80 !important;
}
.lookhover:hover {
  color: #545456 !important;
}

#hover:hover {
  font-size: 24px;
}
.el-select .el-input {
  width: 200px;
}
li.choseEchart {
  margin-left: 40px;
}
.inputFont .el-input__inner {
  width: 160px !important;
}
.back {
  width: 25px;
  height: 25px;
  margin-left: 7px;
  margin-top: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  font-weight: 700;
}
.back:hover {
  background-color: #e0e0e0;
}
.manner {
  margin-top: 5px;
  background-color: rgb(242, 242, 242);
}
</style>
